<template>
  <div class="page-background">
    <div class="initial-setup-page">


      <el-card class="setup-card">
        <div class="card-header">
          <h2>期初建账</h2>
          <!-- <el-button type="text" class="back-home-btn">返回主页</el-button> -->
        </div>

        <el-steps :active="active" align-center class="setup-steps">
          <el-step title="新增品牌" :class="{ 'is-process': active === 1, 'is-finish': active > 1 }" :icon="MoreFilled" />
          <el-step title="新增仓库" :class="{ 'is-process': active === 2, 'is-finish': active > 2 }" :icon="SoldOut" />
          <el-step title="添加产品" :class="{ 'is-process': active === 3, 'is-finish': active > 3 }" :icon="Goods" />
          <el-step title="添加成员" :class="{ 'is-process': active === 4, 'is-finish': active > 4 }" :icon="User" />
        </el-steps>

        <div class="step-content-area">
          <AddBrand v-if="active === 1" @next="nextStep" />
          <AddWarehouse v-else-if="active === 2" @next="nextStep" @prev="prevStep" />
          <AddProduct v-else-if="active === 3" @next="nextStep" @prev="prevStep" />
          <AddMember v-else-if="active === 4" @prev="prevStep" @finish="finishSetup" />
        </div>

      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { MoreFilled, SoldOut, Goods, User } from '@element-plus/icons-vue';
// 导入所有子组件
import AddBrand from './components/AddBrand.vue';
import AddWarehouse from './components/AddWarehouse.vue';
import AddProduct from './components/AddProduct.vue';
import AddMember from './components/AddMember.vue';

const active = ref(1); // 默认从 "新增仓库" (2) 开始，与截图一致

const nextStep = () => { if (active.value < 4) active.value++; };
const prevStep = () => { if (active.value > 1) active.value--; };
const finishSetup = () => { alert('期初建账流程完成！'); };
</script>

<style scoped>
/* 整个页面背景 */
.page-background {
  min-height: 100%;
  width: 100%;
  background-color: #eef2f8;
  /* 浅蓝色背景 */
  position: relative;
  /* background-image: url(../../img/bg/bg.jpg); */
  background-image: url(/src/img/bg/bg.jpg);
  border-image-repeat: repeat;
  background-position: -90px -64px;
}

/* 最大容器尺寸和居中 */
.initial-setup-page {
  width: 1140px;
  height: 766px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 完美的中央居中 */

  display: flex;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}



/* 右侧卡片区域 */
.setup-card {
  width: 1140px;
  height: 100%;
  margin: 0;
  border-radius: 0 10px 10px 0;
  overflow-y: auto;
  /* 保证内容可滚动 */
  box-shadow: none;
}

.card-header {
  /* display: flex; */
  /* justify-content: space-between;
  align-items: center; */
  padding: 20px 20px 0 20px;
  text-align: center;
}

.back-home-btn {
  color: #409eff;
  font-size: 14px;
}

/* 步骤条定制 */
.setup-steps {
  margin: 40px 0 30px;
}

/* 步骤图标定制：模拟图片中的圆点/方块 */
:deep(.el-step__icon) {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 50%;
  font-size: 12px;
}

/* 步骤条完成/进行中/等待中状态的样式 */
:deep(.el-step.is-finish .el-step__icon) {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

:deep(.el-step.is-process .el-step__icon) {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  border-radius: 4px;
  /* 模拟图片中的方形图标 */
  content: ' ';
}

:deep(.el-step__head.is-process) {
  color: #409eff;
}

:deep(.el-step__head.is-finish) {
  color: #409eff;
}

.step-content-area {
  padding: 0 20px 20px 20px;
}
</style>